<template>
  <div>
    <br>
    <h5>自定义菜单</h5>
    <br>
    <div class="right no-space">
      <el-popover
        placement="top"
        title="自定义菜单"
        width="200"
        trigger="click">
        <el-checkbox-group v-model="checkTabs" @change="editCheckTabs">
          <div v-for="item in tabsData" :key="item.name">
            <el-checkbox
              :checked="item.checked"
              :label="item.title"></el-checkbox>
          </div>
        </el-checkbox-group>
        <i class="el-icon-plus silver cursor custom-add-icon" slot="reference"></i>
      </el-popover>
    </div>
    <el-tabs
      v-model="editableTabsValue"
      type="card"
      editable
      @tab-remove="removeTabsPane">
      <el-tab-pane
        :key="item.name"
        v-for="item in editableTabs"
        :label="item.title"
        :name="item.name">{{item.content}}</el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
export default {
  name: 'custom-2tabs',
  data () {
    return {
      editableTabsValue: '2',
      tabsData: [
        {
          title: 'Tab 1',
          name: '1',
          content: 'Tab 1 content'
        },
        {
          title: 'Tab 2',
          name: '2',
          content: 'Tab 2 content'
        },
        {
          title: 'Tab 3',
          name: '3',
          content: 'Tab 3 content'
        },
        {
          title: 'Tab 4',
          name: '4',
          content: 'Tab 4 content'
        },
        {
          title: 'Tab 5',
          name: '5',
          content: 'Tab 5 content'
        },
        {
          title: 'Tab 6',
          name: '6',
          content: 'Tab 6 content'
        }
      ],
      editableTabs: [
        {
          title: 'Tab 1',
          name: '1',
          content: 'Tab 1 content'
        },
        {
          title: 'Tab 2',
          name: '2',
          content: 'Tab 2 content'
        },
        {
          title: 'Tab 3',
          name: '3',
          content: 'Tab 3 content'
        }
      ],
      checkTabs: [],
      tabIndex: 2
    }
  },
  methods: {
    removeTabsPane (targetName) {
      console.log(targetName)
      // 去掉当前项目中的targetName
      this.editableTabs = this.editableTabs.filter(item => item.name !== targetName)
      // 根据当前项重置checkTabs勾选值
      this.checkTabs = this.editableTabs.map(data => data.title)
    },
    editCheckTabs (titles) {
      let data = []
      data = this.tabsData.filter(item => titles.some(title => title === item.title))
      this.editableTabs = [...data]
    }
  },
  created () {
    this.tabsData.forEach(data => (data.checked = this.editableTabs.some(edit => data.name === edit.name)))
    console.log(this.checkTabs)
  }
}
</script>
